<template>
  <div class="orderDetail">
    <div class="pageHeader">
      订单详情
      <img src="@/static/images/arrow-left.png" alt="" @click="back">
    </div>

    <!-- <div class="msg acea-row row-middle">
      <van-icon name="info" size="16" color="#ff4500" />
      <p style="flex:1">如确认订单，请及时在APP端操作状态</p>
      <a href="https://xiaobaiqiu.com/mobile/appinfo" style="color:#ff4500">去下载</a>
    </div> -->

    <van-steps :active="orderDetail.status-1" class="groundStatus" active-color="#38f" v-if="showTab&&orderDetail.paid==1&&orderDetail.refund_status==0">
      <van-step>待确认</van-step>
      <van-step>待下场</van-step>
      <van-step>待完成</van-step>
      <van-step>已完成</van-step>
    </van-steps>

    <van-steps :active="orderDetail.refund_status-1" class="groundStatus" active-color="#38f" v-if="showTab&&orderDetail.refund_status!=0">
      <van-step>申请中</van-step>
      <van-step>退款成功</van-step>
    </van-steps>


    <div class="detail">
      <div class="detailItem">
        <div class="detailMember">
          <p>
            {{ orderDetail.member_phone }}
            ({{ orderDetail.player_num }}人)
          </p>
          <van-icon name="orders-o" size="14" @click="memberList = true"/>
        </div>

        <!-- <div class="detailPay">
          ￥ {{ orderList.price1 }} x {{ orderList.member.length }}
        </div> -->
      </div>

      <div class="detailItem groundName">{{ orderDetail.product_info.title }} / {{  moment(orderDetail.play_time*1000).format("YYYY年MM月DD日") }}</div>

      <!-- <div class="detailItem price1" >
        <span>嘉宾价</span>
        <p>￥{{ orderList.price1 * orderList.member.length }}</p>
      </div> -->

      <div class="detailItem price2" v-if="orderDetail.type_id==2">
        <span>数量</span>
        <p>{{ orderDetail.counts }}份</p>
      </div>

      <div class="detailItem price2">
        <span>服务价</span>
        <p>￥{{ orderDetail.service_price }}</p>
      </div>

       <div class="detailItem price1" >
        <span>总价</span>
        <p>￥{{ orderDetail.total_price }}</p>
      </div>

      <div class="detailItem useTicket">
        <span>优惠券</span>
        <p>-￥{{ orderDetail.coupon_price }}</p>
      </div>

      <div class="detailItem pay">
        <span>实付款</span>
        <p>￥{{ orderDetail.pay_price }}</p>
      </div>

      <div class="orderOperate">
        <div class="go2buy" @click="$router.push(routerUrl+'/go2buy/'+orderDetail.id)" v-if="orderDetail.is_pay_valid==1 && orderDetail.status==0">
          去支付
        </div>

        <div class="orderRetire" @click="orderRetire" v-if="orderDetail.paid==1&&orderDetail.refund_status==0">
          申请退款
        </div>

        <a :href="'tel:'+orderDetail.course.phone" class="groundCall">
          联系球场
        </a>
      </div>
    </div>

    <div class="orderInfo">
      <h1>订单信息</h1>

      <div class="orderID">
        <span>订单编号</span>
        <p>{{ orderDetail.order_number }}</p>

        <div class="orderCopy" v-clipboard:copy="orderDetail.order_number" v-clipboard:success="copySuccess">复制</div>
      </div>

      <div class="time1">
        <span>预定时间</span>
        <p>{{ moment(orderDetail.createtime*1000).format("YYYY年MM月DD日") }}</p>
      </div>

      <div class="time2">
        <span>打球时间</span>
        <p>{{ moment(orderDetail.play_time*1000).format("YYYY年MM月DD日") }}</p>
      </div>

      <div class="time3" v-if="orderDetail.finish_time>0">
        <span>完成时间</span>
        <p>{{ moment(orderDetail.finish_time*1000).format("YYYY年MM月DD日") }}</p>
      </div>
    </div>

    <div class="alertContent">
      <van-dialog v-model="dialog" title="退款失败" :showConfirmButton="true" :closeOnClickOverlay="true">
        <div class="dialogContent">
          <p>您的订单超过退款时限，不能退款</p>
        </div>
      </van-dialog>
      <van-dialog v-model="dialog2" title="确认退款" @confirm="goTuikuan" :showConfirmButton="true" show-cancel-button >
        <div class="dialogContent">
          <p class="qr_tuikuan acea-row row-middle" >请在<van-count-down :time="orderDetail.refundtime_remain*1000" format="HH 时 mm 分 ss 秒" />内确认退款</p>
          <!-- <van-cell-group class="reason"> -->
            <van-field
              :border="false"
              class="reason"
              v-model="reason"
              rows="2"
              autosize
              type="textarea"
              maxlength="50"
              placeholder="请填写退款原因"
            />
          <!-- </van-cell-group> -->
        </div>
      </van-dialog>
    </div>

    <div class="memberList">
      <van-dialog v-model="memberList" title="预订" :showConfirmButton="false" :closeOnClickOverlay="true">
        <ul>
          <li v-for="(item,index) in orderDetail.player " :key="index">
            <span v-if="item.is_vip == 0">嘉宾</span>
            <span v-else-if="item.is_vip == 1" style="background: #6ECF9D">会员</span>
            {{ item.name }}
            {{ item.telphone }}
          </li>
        </ul>
      </van-dialog>
    </div>
  </div>
</template>

<style scoped>
  .msg{
    padding: 0 10px;
    margin-top: 20px;
  }
  .msg p {
    flex: 1;
    margin-left: 10px;
  }
  .dialogContent .reason{
    width: calc(100% - 60px);
    margin: auto;
    /* padding: 30px; */
    box-sizing: border-box;
    margin-bottom: 30px;
    border: 2px solid #ebedf0;
  }
  .qr_tuikuan{
    font-size: 32px;
  }
  .qr_tuikuan>>>.van-count-down{
    font-size: 16px;
    color: #ee0a24;
  }
  .go2buy{
    width: 120px;
    height: 46px;
    line-height: 46px;
    border: 1px solid #ee0a24;
    border-radius: 20px;
    text-align: center;
    margin-right: 20px;
    font-size: 23px;
    box-sizing: border-box;
    color: #ee0a24;
  }
  .memberList >>> .van-dialog__content{
    max-height: 240px;
    overflow-y: auto;
    padding: 0 10px;
  }

  .orderDetail {
    min-height: 100vh;
    background: #f2f3f5;
  }
  .van-step {
    display: flex;
  }

  .groundStatus {
    background: #ffffff;
    padding: 20px 40px;
  }

  .detail , .orderInfo{
    padding: 20px;
    margin-top: 20px;
    background: #ffffff;
  }

  .detailItem {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .detailItem .detailMember {
    display: flex;
  } 
  
  .detailItem .detailMember p {
    position: relative;
    padding-right: 20px;
  }

  .detailItem .detailMember p::after {
    position: absolute;
    right: 10px;
    content: '';
    width: 10px;
    height: 10px;
  }

  .price1 p , .price2 p ,  .useTicket p , .pay p {
    color: orangered;
  }

  .orderOperate {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .orderRetire {
    width: 120px;
    height: 46px;
    line-height: 46px;
    border: 1px solid #cccccc;
    border-radius: 20px;
    color: #cccccc;
    text-align: center;
    margin-right: 20px;
    font-size: 23px;
    box-sizing: border-box;
  }

  .groundCall {
    width: 120px;
    height: 46px;
    line-height: 46px;
    border: 1px solid #1989fa;
    border-radius: 20px;
    color: #1989fa;
    text-align: center;
    font-size: 23px;
    box-sizing: border-box;
  }

  .orderID , .time1 , .time2 , .time3 {
    position: relative;
    display: flex;
    margin-bottom: 20px;
  }

  .orderID .orderCopy {
    position: absolute;
    top: 0;
    right: 0;
    color: #3388ff;
  }

  .orderInfo h1 {
    text-align: left;
    font-size: 32px;
    margin-bottom: 40px;
  }

  .orderID p , .time1 p , .time2 p , .time3 p {
    margin-left: 40px;
  }
  
  .alertContent >>> .van-dialog__header , .memberList >>> .van-dialog__header {
    padding: 10px 0;
    background: #F2F3F5;
  }

  .alertContent h1 {
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    padding: 40px 60px 0;
  }

  .alertContent p {
    padding: 30px 30px ;
  }
  
  .memberList ul {
    padding-bottom: 20px;
  }

  .memberList li {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 80px;
    background: #ffffff;
    border-bottom: 1px solid #cccccc;
  }

  .memberList li span {
    width: 80px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #ffffff;
    background: #cccccc;
    font-size:28px;
    border-radius: 10px;
    margin-right: 10px;
  }

</style>

<script>
import Vue from 'vue';
import api from 'api'
import moment from 'moment'
import config from 'api/config.js'
import { Step, Steps , Dialog , Icon, Toast } from 'vant';

Vue.use(Step);
Vue.use(Steps);
Vue.use(Dialog);
Vue.use(Icon);

export default {
  data() {
    return {
      routerUrl:config.routerUrl,
      orderDetail:{
        product_info:{},
        course:{}
      },
      showTab:false,
      moment,
      dialog2:false,
      order_id:"",
      reason:"",

      dialog: false,
      memberList: false,
      groundStatus: 1,
      orderList: {
        status: '待付款',
        date: '4月5日',
        member: [
          {
            name: 'AAA',
            telphone: '165465465411',
            isVIP: 1
          },
          {
            name: 'BBB',
            telphone: '165465465411',
            isVIP: 0
          },
        ],
        ground: {
          name: 'XXXXXX球场',
          date: '1月7日 7:00'
        },
        price1: 690,
        price2: 20,
        useTicket: 100,
        pay: 1320,
        orderID: '511114545121',
        time1: '2021-12-10 16:00:00',
        time2: '2021-12-10 16:00:00',
        time3: '2021-12-10 16:00:00',
      },
      retireStatus: 0,
      isRetire: false,
    }
  },
  activated() {
    this.showTab = false
    this.getDetail()
  },
  methods: {
    getDetail(){
      let order_id = this.$route.params.id
      this.order_id = order_id
      api.get("/order/orderDetail",{order_id}).then(e=>{
        this.orderDetail = e.data
        this.showTab = true
      })
    },
    goTuikuan(){
      if(this.reason == ""){
        Toast.fail("退款原因不能为空")
        return false
      }
      let params = {
        order_id:this.order_id,
        refund_type:1,
        reason:this.reason
      }
      let loading = Toast.loading({
        message:"操作中...",
        duration:5000
      })
      api.get("/pay/refundApply",params).then(e=>{
        loading.clear()
        Toast.success({
          message:"操作成功",
          duration:600
        })
        setTimeout(()=>{
          this.getDetail()
        },600)
      })
    },
    copySuccess(){
      Toast("复制成功")
    },
    back(){
      this.$router.push(this.routerUrl+"/orderlist/"+this.orderFromType);//返回上一层
    },
    orderRetire() {
      let orderDetail = this.orderDetail
      if(orderDetail.is_refund_valid == 1){
        this.dialog2 = true;
      }else{
        this.dialog = true;
      }
    }
  },
  computed:{
    orderFromType(){
      return this.$store.state.common.orderFromType
    }
  }
}
</script>